<style scoped>
    /*sideBar*/
    nav {
        transition: margin-left .4s;
        position: fixed;
        box-sizing: border-box;
        width: 300px;
        height: 100%;
        background-color: #464c5b;
        border-right: 2px solid #464c5b;
    }

    .sidebarStretch {
        margin-left: -300px;
    }

    @media (max-width: 768px) {
        nav {
            margin-left: -300px;
        }

        .sidebarStretch {
            margin-left: 0;
        }
    }

    .avatar {
        display: block;
        width: 100px;
        height: 100px;
        margin: 50px auto 0 auto;
    }

    .avatar > img {
        width: 100%;
        height: 100%;
        display: block;
        border-radius: 50%;
        border:none;
    }

    .nav-link-container {
        margin-top: 100px;
    }

    .nav-link {
        display: block;
        color: rgba(255, 255, 255, 0.7);
        text-decoration: none;
        text-align: center;
        line-height: 25px;
    }

    .nav-link:hover {
        text-decoration: underline;
        color:#58b957;
    }

    .active {
        color: #58b957;
        font-weight: bolder;
    }

    .social-account-link-container {
        padding: 0 7px;
        position: absolute;
        bottom: 10px;
    }

    .social-account-link {
        display: inline-block;
        width: 40px;
        height: 40px;
        text-decoration: none;
        line-height: 40px;
        text-align: center;
        font-size: 30px;
        color: #81AE64;
    }

    .social-account-link:hover {
        color: #000;
    }

    /*main*/
    #main {
        box-sizing: border-box;
        padding-top:70px;
        padding-left:8px;
        padding-right:8px;
        margin-left: 300px;
        transition: margin-left .4s;
    }
    header {
        z-index: 999;
        transition: left .4s,width .4s;
        background-color:#fff;
        border-bottom:1px solid #eee;
        position:fixed;
        top:0;
        left:300px;
        height: 50px;
        width: calc(100% - 300px);
    }
    .share,.stretch-button{
        color:#ccc;
        line-height: 50px;
        position:absolute;
    }
    .share{
        text-align: right;
        right:25px;
    }
    .stretch-button{
        text-align: left;
        left:25px;
    }
    .share > a:hover,.stretch-button:hover {
        color: #504444;
    }

    #main.mainStretch {
        margin-left: 0;
    }
    .view-container{
        padding:0 15%;
    }
    .headerStretch{
        left:0;
        width:100%;
    }
    .share-list{
        padding-top:5px;
        padding-bottom:5px;
        position:absolute;
        top:60px;
        right:20px;
        width:200px;
        background-color:#fafafa;
        text-align: center;
        box-shadow: 2px 0 2px #c5c5c5,-2px 0 2px #c5c5c5,0 2px 5px #c5c5c5;
    }
    .share-list:before{
        content:'';
        width:0;
        height:0;
        border-bottom:10px solid #c5c5c5;
        border-left:10px solid transparent;
        border-right:10px solid transparent;
        position:absolute;
        right:8px;
        top:-10px;
    }
    .share-list:after{
        content:'';
        width:0;
        height:0;
        border-bottom:10px solid #fafafa;
        border-left:10px solid transparent;
        border-right:10px solid transparent;
        position:absolute;
        right:8px;
        top:-9px;
    }
    .share-list > a{
        display:block;
        line-height:2rem;
        text-decoration: none;
        color:#7e888b;
    }
    .share-list > a:hover{
        color:#444;
    }  
    @media (max-width: 768px) {
        #main {
            width: 100%;
            margin-left: 0;
        }
        header{
            left:0;
            width:100%;
        }
        nav{
            margin-top: 50px;
            height:calc(100vh - 50px);
        }
        .headerStretch{
            left:0;
            width:100%;
        }
        #main.mainStretch {
            margin-left: 300px;
        }
        .view-container{
            padding:0;
            margin-top:20px;
        }
    }
</style>

<template>
    <div class="wrap">
        <nav v-bind:class="{sidebarStretch:isStretch}">
            <router-link class="avatar" v-bind:to="'/aboutme'"><img :src="avatarUrl"></router-link>
            <div class="nav-link-container">
                <router-link v-for="item in navLinks" :key="item.id" v-bind:to="item.href" v-text="item.name"
                             active-class="active" class="nav-link"></router-link>
            </div>
            <div class="social-account-link-container">
                <a  :title='item.title' :target='item.target' v-for="item in socialAccountLinks" :key="item.id" :href="item.href" v-html="item.text"
                   class="social-account-link iconfont"></a>
            </div>
        </nav>
        <div id="main" v-bind:class="{mainStretch:isStretch}">
            <header v-bind:class="{headerStretch:isStretch}"><a class='stretch-button' v-on:click='triggerStretch'>
                <i class="iconfont">&#xe604;</i>
            </a><div class="share" @click='showShareList'><a><i class="iconfont">&#xe685;</i></a></div><div class='share-list' v-show='isShareListShow' @blur='changeIsShareShow'>
                <a v-for='item in shareLists' :href="item.link" target="_blank">{{item.name}}</a>
            </div></header>
            <div class="view-container">
                <router-view></router-view>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'Nav',
        data () {
            return {
                isStretch: false,
                navLinks: [
                    {
                        name: '首页',
                        href: '/home'
                    }, {
                        name: '分类',
                        href: '/categories'
                    }, {
                        name: '关于',
                        href: '/aboutme'
                    }
                ],
                socialAccountLinks: [
                    {
                        text: '&#xe60a;',
                        href: '',
                        title:'QQ'
                    }, {
                        text: '&#xe63e;',
                        href: 'http://weibo.com/3806010531/profile?rightmod=1&wvr=6&mod=personinfo',
                        target:'_blank',
                        title:'微博'
                    }, {
                        text: '&#xe617;',
                        href: 'https://github.com/Joey-Wong/',
                        target:'_blank',
                        title:'github'
                    }
                ],
                avatarUrl:'http://139.199.194.142:80/images/avatar.png',
                isShareListShow:false,
                shareLists:[],
                shareTitle:'',
                shareUrl:''
            }
        },
        mounted() {
            if ((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) {
                this.socialAccountLinks[0].href = "mqqwpa://im/chat?chat_type=wpa&uin=511212586&version=1&src_type=web&web_src=oicqzone.com";
            } else {
                this.socialAccountLinks[0].href = "tencent://message/?uin=511212586&Site=http://vps.shuidazhe.com&Menu=yes";
            }
/*
            const that = this;
            (function(){
                var slateStartX,slateEndX,deltaX,body=document.querySelector('body');
                body.addEventListener("touchstart",function(e){
                        var touch=e.targetTouches[0];
                        slateStartX=touch.screenX;
                });
                body.addEventListener("touchmove",function(e){
                    var touch=e.targetTouches[0];
                    slateEndX=touch.screenX;
                });
                body.addEventListener("touchend",function(){
                    deltaX=slateEndX-slateStartX;//水平滑动距离
                    if(deltaX>50 && !that.isStretch){//右滑
                        that.isStretch = !that.isStretch;
                    }else if(deltaX<-50 && that.isStretch){//左滑
                        that.isStretch = !that.isStretch;
                    }
                });
            }());
            */
        },
        methods:{
            triggerStretch() {
                this.isStretch = !this.isStretch;
            },
            showShareList(){
                this.isShareListShow = !this.isShareListShow;
                this.shareTitle = document.title;
                this.shareUrl = window.location.href;
                this.shareLists = [{
                    name:'分享给QQ好友',
                    link:'http://connect.qq.com/widget/shareqq/index.html?url='+this.shareUrl+'&title='+this.shareTitle+'&pics='+this.avatarUrl
                },{
                    name:'分享到QQ空间',
                    link:'https://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url='+this.shareUrl+'&title='+this.shareTitle+'&site='+this.shareUrl+'&summary='+this.shareTitle+'&pics='+this.avatarUrl
                },{
                    name:'分享到新浪微博',
                    link:'http://service.weibo.com/share/share.php?url='+this.shareUrl+'&title='+this.shareTitle+'&pic='+this.avatarUrl
                }]
            },
            changeIsShareShow(){
                console.log(1);
                this.isShareListShow = false;
            }
        }
    }
</script>